<div id="typography-blockquotes-lists" class="p-24">

    <div class="mat-title">Blockquotes</div>

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <blockquote>
                    <p>
                        You can do anything, but not everything.
                    </p>
                </blockquote>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <blockquote>
                        <p>
                            You can do anything, but not everything.
                        </p>
                    </blockquote>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <blockquote>
                    <p>
                        You can do anything, but not everything.
                    </p>
                    <footer>
                        David Allen
                    </footer>
                </blockquote>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <blockquote>
                        <p>
                            You can do anything, but not everything.
                        </p>
                        <footer>
                            David Allen
                        </footer>
                    </blockquote>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <blockquote class="reverse">
                    <p>
                        You can do anything, but not everything.
                    </p>
                    <footer>
                        David Allen
                    </footer>
                </blockquote>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <blockquote class="reverse">
                        <p>
                            You can do anything, but not everything.
                        </p>
                        <footer>
                            David Allen
                        </footer>
                    </blockquote>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Lists</div>

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <ol>
                    <li>Ordered list item</li>
                    <li>
                        Ordered list item
                        <ol>
                            <li>Ordered list item</li>
                            <li>Ordered list item</li>
                        </ol>
                    </li>
                    <li>Ordered list item</li>
                    <li>Ordered list item</li>
                </ol>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <ol>
                        <li>Ordered list item</li>
                        <li>
                            Ordered list item
                            <ol>
                                <li>Ordered list item</li>
                                <li>Ordered list item</li>
                            </ol>
                        </li>
                        <li>Ordered list item</li>
                        <li>Ordered list item</li>
                    </ol>
                </textarea>
            </fuse-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <ul>
                    <li>Unordered list item</li>
                    <li>
                        Unordered list item
                        <ul>
                            <li>Unordered list item</li>
                            <li>Unordered list item</li>
                        </ul>
                    </li>
                    <li>Unordered list item</li>
                    <li>Unordered list item</li>
                </ul>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <ul>
                        <li>Unordered list item</li>
                        <li>
                            Unordered list item
                            <ul>
                                <li>Unordered list item</li>
                                <li>Unordered list item</li>
                            </ul>
                        </li>
                        <li>Unordered list item</li>
                        <li>Unordered list item</li>
                    </ul>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Definition Lists</div>

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <dl>
                    <dt>Definition term</dt>
                    <dd>This is the definition description</dd>

                    <dt>Another definition term</dt>
                    <dd>This is also another definition description</dd>
                </dl>
            </div>

            <fuse-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <dl>
                        <dt>Definition term</dt>
                        <dd>This is the definition description</dd>

                        <dt>Another definition term</dt>
                        <dd>This is also another definition description</dd>
                    </dl>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Change log</div>

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">

                <div class="changelog">

                    <div class="entry">

                        <div class="title">
                            <span class="version">v1.0.0</span>
                            <span class="date">(2018-05-08)</span>
                        </div>

                        <div class="groups">

                            <div class="breaking-changes">
                                <span class="title">Breaking changes</span>
                                <ul>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                </ul>
                            </div>

                            <div class="new">
                                <span class="title">New</span>
                                <ul>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                </ul>
                            </div>

                            <div class="improved">
                                <span class="title">Improved</span>
                                <ul>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                </ul>
                            </div>

                            <div class="fixed">
                                <span class="title">Fixed</span>
                                <ul>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                    <li>This is an example list item for the change log</li>
                                </ul>
                            </div>

                        </div>

                    </div>

                </div>

            </div>

            <fuse-highlight lang="html" class="source-code" fxFlex="50">
                <textarea #source hidden="hidden">
                    <div class="changelog">

                        <div class="entry">

                            <div class="title">
                                <span class="version">v1.0.0</span>
                                <span class="date">(2018-05-08)</span>
                            </div>

                            <div class="groups">

                                <div class="breaking-changes">
                                    <span class="title">Breaking changes</span>
                                    <ul>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                    </ul>
                                </div>

                                <div class="new">
                                    <span class="title">New</span>
                                    <ul>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                    </ul>
                                </div>

                                <div class="improved">
                                    <span class="title">Improved</span>
                                    <ul>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                    </ul>
                                </div>

                                <div class="fixed">
                                    <span class="title">Fixed</span>
                                    <ul>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                        <li>This is an example list item for the change log</li>
                                    </ul>
                                </div>

                            </div>

                        </div>

                    </div>
                </textarea>
            </fuse-highlight>

        </div>

    </div>

</div>